<div class="devui-demo-container" dAnchorBox dAnchorHashSupport [view]="{ top: 180, bottom: 0 }">
  <d-demo-nav [navItems]="navItems"></d-demo-nav>
  <div class="devui-demo-example" [dAnchor]="'datepicker-default'">
    <div class="devui-demo-title">{{ 'components.datepicker.basicDemo.title' | translate }}</div>
    <div class="devui-demo-text"></div>
    <d-codebox id="components-datepicker-default" [sourceData]="basicSource">
      <d-basic demo></d-basic>
    </d-codebox>
  </div>

  <div class="devui-demo-example" [dAnchor]="'datepicker-set-mode'">
    <div class="devui-demo-title">{{ 'components.datepicker.setModeDemo.title' | translate }}</div>
    <div class="devui-demo-text">
      {{ 'components.datepicker.setModeDemo.description' | translate }}
    </div>
    <d-codebox id="components-datepicker-set-mode" [sourceData]="setModeSource">
      <d-set-mode demo></d-set-mode>
    </d-codebox>
  </div>

  <div class="devui-demo-example" [dAnchor]="'datepicker-min-max'">
    <div class="devui-demo-title">{{ 'components.datepicker.limitDemo.title' | translate }}</div>
    <div class="devui-demo-text"></div>
    <d-codebox id="components-datepicker-min-max" [sourceData]="minMaxSource">
      <d-min-max demo></d-min-max>
    </d-codebox>
  </div>

  <div class="devui-demo-example" [dAnchor]="'datepicker-append-to-body'">
    <div class="devui-demo-title">{{ 'components.datepicker.appendToBodyDemo.title' | translate }}</div>
    <div class="devui-demo-text"></div>
    <d-codebox id="components-append-to-body" [sourceData]="appendToBodySource">
      <d-append-to-body demo></d-append-to-body>
    </d-codebox>
  </div>

  <div class="devui-demo-example" [dAnchor]="'datepicker-range'">
    <div class="devui-demo-title">{{ 'components.datepicker.rangeDemo.title' | translate }}</div>
    <div class="devui-demo-text">
      {{ 'components.datepicker.rangeDemo.description' | translate }}
    </div>
    <d-codebox id="components-datepicker-range" [sourceData]="rangeSource">
      <d-datepicker-range demo></d-datepicker-range>
    </d-codebox>
  </div>

  <div class="devui-demo-example" [dAnchor]="'datepicker-range-basic'">
    <div class="devui-demo-title">{{ 'components.datepicker.rangePickerDemo.title' | translate }}</div>
    <div class="devui-demo-text"></div>
    <d-codebox id="d-datepicker-range-basic" [sourceData]="rangePickerSource">
      <d-datepicker-range-basic demo></d-datepicker-range-basic>
    </d-codebox>
  </div>

  <div class="devui-demo-example" [dAnchor]="'datepicker-range-format'">
    <div class="devui-demo-title">
      {{ 'components.datepicker.rangeFormatDemo.title' | translate }}
    </div>
    <div class="devui-demo-text"></div>
    <d-codebox id="d-datepicker-range-format" [sourceData]="rangePickerFormat">
      <d-datepicker-range-format demo></d-datepicker-range-format>
    </d-codebox>
  </div>

  <div class="devui-demo-example" [dAnchor]="'datepicker-range-disabled'">
    <div class="devui-demo-title">{{ 'components.datepicker.rangeDisableDemo.title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.datepicker.rangeDisableDemo.description' | translate }}</div>
    <d-codebox id="d-datepicker-range-disabled" [sourceData]="rangePickerDisabled">
      <d-datepicker-range-disabled demo></d-datepicker-range-disabled>
    </d-codebox>
  </div>

  <div class="devui-demo-example" [dAnchor]="'datepicker-range-restricted-range'">
    <div class="devui-demo-title">{{ 'components.datepicker.rangeRestrictedDemo.title' | translate }}</div>
    <div class="devui-demo-text"></div>
    <d-codebox id="d-datepicker-range-restricted-range" [sourceData]="rangePickerRestricted">
      <d-datepicker-range-restricted-range demo></d-datepicker-range-restricted-range>
    </d-codebox>
  </div>

  <div class="devui-demo-example" [dAnchor]="'datepicker-range-time'">
    <div class="devui-demo-title">
      {{ 'components.datepicker.rangeTimeDemo.title' | translate }}
    </div>
    <div class="devui-demo-text"></div>
    <d-codebox id="d-datepicker-range-time" [sourceData]="rangePickerTime">
      <d-datepicker-range-time demo></d-datepicker-range-time>
    </d-codebox>
  </div>

  <div class="devui-demo-example" [dAnchor]="'datepicker-clear-button'">
    <div class="devui-demo-title">
      {{ 'components.datepicker.rangeClearDemo.title' | translate }}
    </div>
    <div class="devui-demo-text">
      {{ 'components.datepicker.rangeClearDemo.description' | translate }}
    </div>
    <d-codebox id="components-datepicker-clear-button" [sourceData]="rangeClearButtonSource">
      <d-range-clear-button demo></d-range-clear-button>
    </d-codebox>
  </div>

  <div class="devui-demo-example" [dAnchor]="'datepicker-range-today'">
    <div class="devui-demo-title">
      {{ 'components.datepicker.rangeTodayDemo.title' | translate }}
    </div>
    <div class="devui-demo-text">{{ 'components.datepicker.rangeTodayDemo.description' | translate }}</div>
    <d-codebox id="components-datepicker-range-today" [sourceData]="rangeTodaySource">
      <d-range-today demo></d-range-today>
    </d-codebox>
  </div>

  <div class="devui-demo-example" [dAnchor]="'datepicker-format'">
    <div class="devui-demo-title">{{ 'components.datepicker.formatDemo.title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.datepicker.formatDemo.description' | translate }}</div>
    <d-codebox id="components-datepicker-format" [sourceData]="formatSource">
      <d-datepicker-format demo></d-datepicker-format>
    </d-codebox>
  </div>

  <div class="devui-demo-example" [dAnchor]="'custom-view-template'">
    <div class="devui-demo-title">{{ 'components.datepicker.templateDemo.title' | translate }}</div>
    <div class="devui-demo-text">
      {{ 'components.datepicker.templateDemo.description' | translate }}
    </div>
    <d-codebox id="d-custom-view-template" [sourceData]="customViewTemplateSource">
      <d-custom-view-template demo></d-custom-view-template>
    </d-codebox>
  </div>

  <div class="devui-demo-example" [dAnchor]="'date-picker-clear-button'">
    <div class="devui-demo-title">{{ 'components.datepicker.clearButtonDemo.title' | translate }}</div>
    <div class="devui-demo-text">
      {{ 'components.datepicker.clearButtonDemo.description' | translate }}
    </div>
    <d-codebox id="d-date-picker-clear-button" [sourceData]="clearButtonSource">
      <d-clear-button demo></d-clear-button>
    </d-codebox>
  </div>

  <div class="devui-demo-example" [dAnchor]="'date-picker-button'">
    <div class="devui-demo-title">{{ 'components.datepicker.buttonDemo.title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.datepicker.buttonDemo.description' | translate }}</div>
    <d-codebox id="d-date-picker-button" [sourceData]="buttonSource">
      <d-datepicker-button demo></d-datepicker-button>
    </d-codebox>
  </div>

  <div class="devui-demo-example" [dAnchor]="'two-date-picker-basic'">
    <div class="devui-demo-title">{{ 'components.datepicker.twoDatePickerDemo.title' | translate }}</div>
    <div class="devui-demo-text"></div>
    <d-codebox id="d-two-date-picker-basic" [sourceData]="twoDatepickerBasic">
      <d-two-datepicker-basic demo></d-two-datepicker-basic>
    </d-codebox>
  </div>

  <div class="devui-demo-example" [dAnchor]="'two-date-picker-format'">
    <div class="devui-demo-title">
      {{ 'components.datepicker.twoDatepickerFormatDemo.title' | translate }}
    </div>
    <div class="devui-demo-text"></div>
    <d-codebox id="d-two-date-picker-format" [sourceData]="twoDatepickerFormat">
      <d-two-datepicker-format demo></d-two-datepicker-format>
    </d-codebox>
  </div>
</div>
